    <!-- 抽奖大转盘 --><template>
  <div>
    <!-- 大转盘 -->
    <div class="link luck-draw1">
      <img src="@/assets/imgs/bigWheel/img_11.jpg" />
      <div class="game">
        <div class="luck-draw-box">
          <div
            class="turnplate"
            :style="{
              backgroundImage: `url(${bgImg})`,
              backgroundSize: '100% 100%',
            }"
          >
            <canvas
              class="item"
              id="wheelcanvas"
              width="700px"
              height="700px"
            ></canvas>
            <img
              class="pointer"
              src="@/assets/imgs/bigWheel/luck-draw1-jt.png"
              @click="luckDraw()"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/js/bigWheel/awardRotate.js";
import game from "@/assets/js/bigWheel/game.js";
import $ from "jquery";

export default {
  data() {
    return {
      isLogin: true, //用户是否登录
      luckDraw2: "", //买券抽奖，判断用户是否已参与过，1可以抽奖 2不能抽奖 3已经抽过
      luckDrawClick: true, //抽奖按钮是否可以点击，避免重复请求点击
      popup: {
        //弹窗显示及显示的类型
        show: false,
        type: "zj", //不同奖品弹窗
      },
      prizeName: "", //奖品名称
      bgImg: require("@/assets/imgs/bigWheel/luck-draw1-bg.png"),
    };
  },
  created() {
    console.log("created...");
    var _this = this;
    _this.getLuckDraw2Info(); // 获取买券抽奖数据
    setTimeout(function () {
      game.drawRouletteWheel();
    }, 300);
  },
  methods: {
    // 获取买券抽奖数据
    getLuckDraw2Info: function () {
      var _this = this;
      if (_this.isLogin) {
        // 判断用户是否有抽奖资格,需登录406,
        var res = {
          code: 200,
          msg: "",
          data: 1, // 1可以抽奖 2不能抽奖 3已经抽过
        };
        _this.luckDraw2 = res.data; //1可，2不可，3已抽奖，改变它值可控制能不能抽奖
      }
    },
    luckDraw: function () {
      var _this = this;
      // 判断是否可以点击，避免重复请求点击
      if (_this.luckDrawClick) {
        _this.luckDraw2 = 1; //由接口返回是否能抽奖
        // 判断用户是否已参与，模拟
        if (_this.luckDraw2 == 3) {
          //3参与过
          _this.popup.type = "ycy";
          _this.popup.show = true;
          _this.iscj = "您已参与过抽奖";
        } else if (_this.luckDraw2 == 2) {
          //2未购券
          _this.popup.type = "wgq";
          _this.popup.show = true;
          _this.nowgq = "亲亲，您还未购券，无法参与抽奖。";
        } else {
          //1可以抽奖
          _this.getPrize();
        }
      }
    },
    //请求抽奖接口，奖口由后台决定，prize_type对应前端game.js中索引值turnplate.restaraunts
    getPrize: function () {
      var _this = this;
      _this.luckDrawClick = false;
      //接奖接口，改变它值可控制有没有中奖，奖品名
      // methods.ajax(prizeUrl, {}, function(res) {
      let res = {
        code: 200,
        msg: "成功",
        data: {
          code: 200,
          prize_name: "jmgo坚果投影仪", //  对应game.js中奖品名
          prize_type: 3, //  对应game.js中奖品索引，1没奖，其他中奖
        },
      };
      //302该用户已经参与过抽奖
      if (res.data.code == "302") {
        _this.popup.show = true;
        _this.popup.type = "ycy";
        _this.luckDrawClick = true;
      } else {
        let prizeId = res.data.prize_type;
        _this.prizeName = res.data.prize_name;
        //动态添加大转盘的奖品与奖品区域背景颜色
        game.turnplate.randomRate = ["0%", "0%", "0%", "0%", "0%"];
        _this.luckDraw2 = 3; //定为抽过奖
        // 奖品
        game.turnplate.randomRate.splice(prizeId, 1, "100%");
        game.drawRouletteWheel();
        // 开始抽奖
        game.start();
      }
      // })
    },
  },
};
</script>

<style lang="less" scoped>
.game {
  position: absolute;
  width: 25%;
  top: 12%;
  left: 52.8%;

  .luck-draw-box .turnplate {
    display: block;
    width: 100%;
    position: relative;

    canvas.item {
      width: 100%;
      vertical-align: top;
    }

    img.pointer {
      position: absolute;
      width: 25%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -61%);
      cursor: pointer;
    }
  }
}

img {
  display: block;
  width: 100%;
}
</style>
